<template>
  <div class="index">
    
    <!-- search -->
    <search></search>

    <!-- swiper -->
    <div class="swiper">
      <swiper indicator-dots autoplay circular>
        <block v-for="item of bannerImg" :key="item.good_id">
          <swiper-item>
            <image :src="item.image_src"></image>
          </swiper-item>
        </block>
      </swiper>
    </div>

    <!-- nav -->
    <div class="nav">
      <div
        @tap="tapNavItem(item.navigator_url)"
        class="nav-item"
        v-for="item of navImg"
        :key="item.goods_id"
        >
        <image
          :src="item.image_src"
          lazy-load="false">
        </image>
      </div>
    </div>

    <!-- 分类楼层 -->
    <div class="cate">
      <!-- lady -->
      <block
        v-for="(item, index) of floor"
        :key="index">
        <div class="cate-item">
          <div class="item-title">
            <image
              :src="item.floor_title.image_src"
              mode="aspectFit"
              lazy-load="false">
            </image>
          </div>
          <div class="item-content" >
            <div class="item-left">
              <image
                :src="item.product_list[0].image_src"
                mode="aspectFit"
                lazy-load="false">
              </image>
            </div>
            <div class="item-right">
              <block
                v-for="(subItem, i) of item.product_list"
                :key="i">
                <image
                  :class="index===0?'':'floor-img'"
                  v-if="i !== 0"
                  :src="subItem.image_src"
                  mode="aspectFit"
                  lazy-load="false">
                </image>
              </block>
            </div>
          </div>
        </div>
      </block>
    </div>

    <!-- footer -->
    <div class="footer">
      <span>｡◕ᴗ◕｡我是有底线的！</span>
    </div>

    <!-- top -->
    <div class="top" @click="toTop">
      <image
        src="/static/images/top.svg"
        mode="aspectFit"
        lazy-load="false">
      </image>
    </div>

    <!-- 自定义tabbar -->
    <custom-tabbar></custom-tabbar>

  </div>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar'
import Search from '@/components/Search'
import { getSwiper, getNav, getFloor } from '@/api'
export default {
  components: {
    Search,
    CustomTabbar
  },
  data () {
    return {
      bannerImg: [],
      navImg: [],
      floor: []
    }
  },
  mounted () {
    // 初始化页面数据
    this.initPage()
  },
  methods: {
    // nav跳转
    tapNavItem (url) {
      if (url) {
        let to = url + '/main'
        wx.switchTab({ url: to });
      } else {
        wx.showToast({
          title: '功能暂未开启', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => {}
        });
      }
    },
    // 初始化页面数据
    initPage () {
      // console.log(request)
      // 轮播图
      getSwiper('/home/swiperdata').then(res => {
        // console.log('banner', res)
        if (res.meta.status === 200) {
          this.bannerImg = res.message
        }
      })
      // 导航
      getNav('/home/catitems').then(res => {
        // console.log('nav', res)
        if (res.meta.status === 200) {
          this.navImg = res.message
        }
      })
      // 楼层数据
      getFloor('/home/floordata').then(res => {
        console.log('floor', res)
        this.floor = res.message
      })

    },

    // 滚动到顶部
    toTop () {
      wx.pageScrollTo({
        scrollTop: 0, //滚动到页面的目标位置（单位px）,
        duration: 500 //滚动动画的时长，默认300ms，单位 ms,
      });
    }
  }
}
</script>

<style scoped>

.index {
  background-color: #fff;
}

/* swiper */
.swiper swiper {
  height: 340rpx;
}
.swiper image{
  width: 750rpx;
  height: 340rpx;
}

/* nav */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}
.nav .nav-item {
  flex: 1;
  /* display: flex;
  justify-content: center; */
  text-align: center;
}
.nav .nav-item image {
  width: 128rpx;
  height: 140rpx;
}

/* cate */
.cate {
  margin-top: 20rpx;
}
.item-title {
  padding: 10rpx 10rpx 0;
  background-color: #f8f8f8;
}
.item-title image {
  width: 750rpx;
  height: 60rpx;
}
.item-content {
  display: flex;
  padding: 20rpx;
}
.item-content image {
  border-radius: 10rpx;
}
.item-content .item-left image{
  width: 232rpx;
  height: 386rpx;
}
.item-content .item-right image {
  padding: 0 0 10rpx 10rpx;
  width: 229rpx;
  height: 190rpx;
}
.item-content .item-right .floor-img:nth-child(1),
.item-content .item-right .floor-img:nth-child(4) {
  width: 269rpx;
}
.item-content .item-right .floor-img:nth-child(2),
.item-content .item-right .floor-img:nth-child(3) {
  width: 190rpx;
}

/* footer */
.footer {
  padding: 20rpx 0 100rpx;
  color: #ccc;
  background-color: #f8f8f8;
  font-size: 28rpx;
  text-align: center;
}

/* top */
.top {
  position: fixed;
  right: 20rpx;
  bottom: 60rpx;
}
.top image {
  width: 64rpx;
  height: 64rpx;
}
</style>
